<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{title}}</h1>

        <!-- 1. 通过属性的方式将值传递给子组件 -->
        <!-- 只要传的值不是字符串，那么我们都需要加 : -->
        <!-- 属性传值的时候不可以使用大写字母 -->
        <!-- 可以使用连接符进行传递，但是接收的时候要使用驼峰命名接收 -->
        <cart :count="count" :num="10" :msg="msg" :obj="user" h="180" data-bb="66666" />


    </div>
</body>

<template id="cart">
    <div>
        <h1>{{title}}</h1>
        <!-- 想要将父组件中的 count  msg  user 显示出来 -->

        <div>
            <!-- 3. 使用父组件传递过来的数据 -->
            {{ count }}
            {{ num + 1 }}
            {{msg}}
            {{ obj.name }}
            {{ obj.age }}
            {{ h }}

            {{dataBb}}
        </div>

    </div>
</template>

<script>

    // 子组件
    const com = {
        template: '#cart',
        data() {
            return {
                title: '子组件'
            }
        },
        // 2. 通过 props 选项接收父组件传递过来的数据
        props: ['count', 'num', 'msg', 'obj', 'h', 'dataBb']
    }



    // 父组件
    const app = {
        data() {
            return {
                title: '父组件',
                count: 100,
                msg: '传家宝',
                user: {
                    name: '老彭',
                    age: 18
                }
            }
        },
        methods: {},
        components: {
            cart: com
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>